<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <style>
        #modal{
            height:200px;
            width:200px;
            line-height: 200px;
            position:fixed;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            border:1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="open">打开弹窗</button>
    <button id="close">关闭弹窗</button>
    <script>
        // Modal 类 实例化好多次 只实例化一次叫单例模式
        // 推迟Modal 的实例化的时间到第一次显式
        // 立即执行函数
        // 构建Modal类
        //   1. 立即执行函数+返回函数
        // 函数嵌套函数 闭包
        // 2. return 有的 如果在构造函数中手动指定 return new 的高级用法
        // 满足单例
        const Modal=(function() {
               //console.log('立即执行函数')
               let modal = null;// 模态框  永生
               return function() {
                //   函数里面找变量 作用域链
              if(!modal){ // 第一次 new null
                modal = document.createElement('div');
                modal.id = 'modal';
                modal.style.display = 'none';
                modal.innerText = '我是全局唯一的Modal'
                document.body.appendChild(modal);
              }
              return modal;
               }
        })()
        // const Modal = function() {
        //     // dom->body
        //   this.modalBox = document.createElement('div');
        //   this.modalBox.id = 'modal';
        //   this.modalBox.style.display = 'none';
        //   this.modalBox.innerText = '我是全局唯一的Modal'
        //   document.body.appendChild(this.modalBox);
        // }
        //let modal = null;
        //let modal = new Modal();// 直接实例化Modal
        // 点不点按钮 触发登录相关权限与否 modal框是不是已经挂载在页面
        // modal框 不是要提前存在的
        // modal 第一次 生产显式
        // let modal = document.createElement('div')
        // modal.id = 'modal';
        // modal.style.diaplay = 'none';
        // modal.innerText = '我是全局唯一的Modal'
        // document.body.appendChild(modal);
        const openButton = document.getElementById('open');
        const closeButton = document.getElementById('close');
        // open close 都会去做实例化
        // 单例模式的概念是无论实例化多少次，返回的任然是原来的唯一实例
        openButton.addEventListener('click',function() {
            // 弹出框显式
            // modal 没有的话  new 
            // 达到推迟的目的
            let modal = new Modal();// 局部
            modal.style.display = 'block';
        })
        closeButton.addEventListener('click',function() {
            // 已经显式的弹出框隐藏掉
            let modal = new Modal();
            modal.style.display = 'none';
        })
    </script>
</body>
</html>